<template>
    <div class="page_content">
        <div class="box">
           <el-row :gutter="10">
                <el-col :span="16">
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <div class="grid-content bg-purple summarize">
                                <div v-for="item in datafirst" :key="item.id">
                                    <div class="num">
                                        {{item.num}}
                                    </div>
                                    <span>{{item.name}}</span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <div class="grid-content bg-purple summarize">
                                <div v-for="item in datasecond" :key="item.id">
                                    <div class="num">
                                        {{item.num}}
                                    </div>
                                    <span>{{item.name}}</span>
                                </div> 
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content grid-content-big  bg-purple">
                        <ul>
                            <li v-for="item in broadcast" :key="item.id">
                            <a href=""><span>{{item.content}}</span> <span>{{item.time}}</span></a>
                            </li>
                        </ul>
                        <div class="more"><a href="">MORE>></a></div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="16">
                    <div class="grid-content grid-content-last bg-purple file-box">
                        <div class="file-list">
                            <ul>
                                <li><a href="">系统使用说明</a></li>
                                <li><a href="">《颐德尼喜商户合作协议》</a></li>
                            </ul>
                        </div>
                        <div class="getmore"><a href="">更多下载>></a></div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content grid-content-last bg-purple others-info">
                        <div>
                            <ul>
                                <li>+86 020-8888-9999</li>
                                <li>liu_ku@yeeds.com</li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>			
</template>

<script>

export default {
    data(){
        return{
            datafirst:[
                {   
                    id:1,
                    name:'今日订单',
                    num:88
                },
                {   
                    id:2,
                    name:'待接单量',
                    num:356
                },
                {   
                    id:3,
                    name:'待发货订单',
                    num:266
                },
                {   
                    id:4,
                    name:'异常订单',
                    num:266
                }
            ],
            datasecond:[
                {   
                    id:5,
                    name:'商品总数',
                    num:366
                },
                {   
                    id:6,
                    name:'待审核',
                    num:88
                },
                {   
                    id:7,
                    name:'审核通过',
                    num:208
                },
                {   
                    id:8,
                    name:'审核不通过',
                    num:70
                }
            ],
            broadcast:[
                {   
                    id:1,
                    content:'春节大促销',
                    time:'2019-03-24'
                },
                {   
                    id:2,
                    content:'夏季大甩卖',
                    time:'2019-03-24'
                },
                {   
                    id:3,
                    content:'秋季大清仓大促销',
                    time:'2019-03-24'
                }
            ]
        }
    },
    created(){
        
    }
}
</script>

<style lang="scss">
        .box{
            height: 470px;


            .summarize{
                display: flex;
                justify-content: space-around;
                padding: 0 50px;
                div{
                    width: 110px;
                    height: 150px;
                    // background-color: #999;
                    .num{
                        height: 50px;
                        margin-top: 40px;
                        line-height: 50px;
                        text-align: center;
                        border-bottom: 3px solid #eeecec;
                        font-weight: bold;
                        font-size: 25px;
                        color: #f1895c;
                    }
                    span{
                        margin-top: 10px;
                        display: block;
                        text-align: center;
                        font-size: 14px;
                        color: #666;
                        font-weight:550;
                    }
                }
            }

            .file-box{
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                padding: 20px;
                color: #999;
                a:hover{
                    color: #333;
                }

                .file-list{
                    height: 70px;
                    margin-top: 25px;
                    margin-left: 60px;
                    // border: 1px solid black;
                    ul{
                        // list-style: none;
                        li{
                            font-size: 13px;
                            margin-top: 15px;

                            a{
                                text-decoration: none;
                                color: #999;
                            }
                            a:hover{
                                color: #333;
                            }
                        }
                    }
                }

                .getmore{
                    font-size: 13px;
                    margin-top: 5px;
                    text-align: right;
                    a{
                        text-decoration: none;
                        color: #666;
                        
                    }
                }
            }

            .others-info{
                box-sizing: border-box;
                padding: 20px;

                ul{ 
                    height: 105px;
                    // border: 1px solid black;
                    margin-left: 15px;
                    list-style:square;
                    li{
                        font-size: 13px;
                        color: #999;
                        margin-top: 15px;
                    }
                }

            }

            .grid-content-big{
                    padding: 10px;  
                    padding-left: 25px;
                    padding-right: 25px;
                    box-sizing: border-box;
                    a:hover{
                        color: #333;
                    }
                    ul{
                        list-style: none;
                        // border: 1px solid black;
                        height: 230px;
                        li{
                            a{
                                display: block;
                                font-size: 13px;
                                margin-top: 20px;
                                color: #999;
                                display: flex;
                                justify-content: space-between;
                                text-decoration: none;
                            }
                            
                        }
                    }
                    .more{
                        float: right;
                        // margin-top: 10px;

                        a{
                            text-decoration: none;
                            font-size: 13px;
                            font-weight: bold;
                            color: #999;
                        }
                    }
            }

            .el-row {
                margin-bottom: 10px;

                &:last-child {
                margin-bottom: 0;
                }
            }

            .el-col {
                border-radius: 4px;
            }

            .bg-purple-dark {
                // background: #99a9bf;
            }

            .bg-purple {
                // background: #d3dce6;
            }

            .bg-purple-light {
                // background: #e5e9f2;
            }

            .grid-content {
                border-radius: 4px;
                height: 150px;
                border: 1px dashed rgb(202, 201, 201);  
            }

            .grid-content-last{
                height: 150px;
            }

            .grid-content-big{
                height: 315px;
            }

            .row-bg {
                padding: 10px 0;
                background-color: #f9fafc;
            }

        }

</style>
